import React, { Component } from "react";
import $ from "jquery";
import fetch from "isomorphic-fetch";
import { connect } from "react-redux";
import FooterAll from './FooterAll'
import {setcookie,getcookie,delcookie} from './cookie';
import { fetchList1, setNewsId, goToNewDetail } from "../action/counter";

class NewsMain extends Component {
  componentWillUnmount(){
    $("html").scrollTop(0);
    }
  componentDidMount() {
    $("body").css("overflow", "auto");
    var num = 6;
    this.props.fetchList1(num);
    var that = this;
    $(".load-btn").on("click", function() {
      that.props.fetchList1(num + 6);
    });
  }

  handlerClick(e) {
    // console.log(e.currentTarget.title)

    this.props.setNewsId(e.currentTarget.title);
    // console.log(this.props.newsId);

    var newDetailId = e.currentTarget.title;
    this.props.goToNewDetail(newDetailId);
    setcookie("NewId",newDetailId,7);
    $(location).prop("href", "http://localhost:8080/#/newsdetail");
  }

  render() {
    var arr;
    try {
      arr = this.props.lists.rows;
    } catch (e) {
      // non-standard
    }

    var newlist = [];
    var hotnew = [];
    if (arr) {
      for (let i = 0, len = arr.length; i < len; i++) {
        newlist.push(
          <li key={i} className="item">
            <a  className="top">
              <div
                className="pic"
                onClick={this.handlerClick.bind(this)}
                title={arr[i]._id}
              >
                <img src={arr[i].src} />
              </div>
            </a>
            <div className="sheet">
              <div key={i+20} className="date">
                <strong key={i}>
                  {arr[i].date.substr(8, 2)}
                  <strong key={i}>{arr[i].date.substr(5, 2)}月</strong>
                </strong>
              </div>
              <h5 key={i}>{arr[i].title}</h5>
              <a
                key={i+30}
                className="readmore"
                onClick={this.handlerClick.bind(this)}
                title={arr[i]._id}
              >
                <span key={i+10}>阅读更多</span>
                <b />
              </a>
            </div>
          </li>
          // <li key={i}>{arr[i].title}</li>
        );
      }
      hotnew.push(
        <div className="top" key='x'>
          <div
            className="pic"
            onClick={this.handlerClick.bind(this)}
            title={arr[2]._id}
          >
            <img src={arr[2].src} />
            <div className="date">
              {arr[2].date.substr(8, 2)}
              <strong>{arr[2].date.substr(5, 2)}月</strong>
            </div>
          </div>
          <div className="sheet">
            <p className="place">
              <strong className="ng-binding" />
            </p>
            <h4>{arr[2].title}</h4>
            <h5 />
            <p className="abstract">{arr[2].desc.substr(0, 155)}...</p>
            <div className="button">
              <a
                className="more"
                onClick={this.handlerClick.bind(this)}
                title={arr[2]._id}
              >
                <span>阅读更多</span>
                <b />
              </a>
            </div>
          </div>
        </div>
      );
    }

    return (
      <div id="NewsMain">
        <div className="fixed" />
        <section className="news-box new-box">
          <div className="title-box">
            <div className="news-title">
              <h1>
                <span>
                  <strong className='newsTitle'>新闻</strong>
                </span>
                <br />
                <span className="subtitle">Lamborghini World</span>
              </h1>
              <p />
              <p>最新动态</p>
              <p />
            </div>
          </div>
        </section>
        <section className="hotnew">
          <div className="hot-box">{hotnew}</div>
        </section>
        <section className="news-list">
          <div className="news-box">
            <ul>
              <li>
                <ul>{newlist}</ul>
              </li>
            </ul>
            <div className="loadmore">
              <a className="load-btn">
                <span>显示更多</span>
                <b>+</b>
              </a>
            </div>
          </div>
        </section>
        <FooterAll/>
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    lists: state.lists,
    newsId: state.newsId
  };
};
export default connect(mapStateToProps, {
  fetchList1,
  setNewsId,
  goToNewDetail
})(NewsMain);
